<template>
 <div class="card">
  <div>
   <h1 style="width: 100%; text-align: center; font-size: large">
    {{ title }}
   </h1>
   <text v-html="content"> </text>
  </div>
 </div>
</template>
<style>
.card {
 padding: 20px;
 z-index: 10;
 width: 290px;
 /* height: 254px; */
 background: #07182e;
 position: relative;
 display: flex;
 place-content: center;
 place-items: center;
 overflow: hidden;
 border-radius: 20px;
}

.card div {
 z-index: 1;
 color: white;
 /* font-size: 2em; */
 font-weight: 300;
 font-size: xx-small;
}

.card::before {
 content: '';
 position: absolute;
 width: 100px;
 background-image: linear-gradient(180deg, rgb(0, 183, 255), rgb(255, 48, 255));
 height: 130%;
 animation: rotBGimg 3s linear infinite;
 transition: all 0.2s linear;
}

@keyframes rotBGimg {
 from {
  transform: rotate(0deg);
 }

 to {
  transform: rotate(360deg);
 }
}

.card::after {
 content: '';
 position: absolute;
 background: #07182e;
 inset: 5px;
 border-radius: 15px;
}

/* .card:hover:before {
  background-image: linear-gradient(180deg, rgb(81, 255, 0), purple);
  animation: rotBGimg 3.5s linear infinite;
} */
</style>
<script setup>
import { defineProps } from 'vue'
const props = defineProps({
 title: {
  type: String,
  required: true
 },
 content: {
  type: String,
  required: true
 }
})
</script>
